<script setup lang="ts">
import {ChatDotRound, Pointer} from "@element-plus/icons-vue";
import router from "@/router";

const props = defineProps({
  posts: Array
})

const goDetail = (id: number) => {
  router.push({name:'detail',query:{id:id}})
}

</script>

<template>
  <div style="width: 600px;background: #FFFFFF; margin-top: 16px;border-radius: 4px; border: 1px solid #cccccc" v-for="(item, index) in props.posts" :key="index" @click="goDetail(item.postId)">
    <div style="display: flex;align-items: center">
      <el-avatar :size="50" style="margin-left: 10px;margin-top: 6px" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      <div style="margin-left: 10px; margin-top: 6px">
        <p style="font-size: 22px">{{item.nickName}}</p>
        <p style="font-size: 12px">{{item.createTime}}</p>
      </div>
    </div>
    <div>
      <h2 style="margin-left: 16px;margin-top: 10px">#{{item.title}}</h2>
    </div>
    <div class="contentText">
      <el-text>
        {{item.content}}
      </el-text>
    </div>
    <div style="display: flex; justify-content: center;align-items: center">
      <el-icon style="margin-left: 4px"><Pointer /></el-icon><p style="margin-left: 4px">{{ item.likeCount }}</p>
      <el-icon style="margin-left: 10px"><ChatDotRound /></el-icon><p style="margin-left: 4px">{{ item.commentCount }}</p>
    </div>
  </div>
</template>

<style scoped>
.contentText{
  width: 570px;
  height: 77px;
  margin: 0 auto;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>